<template>
    <div class="search">
        <vheader :is-left="true" title="搜索"/>
        <div class="search_header">
            <form class="search_wrap">
                <i class="fa fa-search"></i>
                <input type="text" v-model="key_word" placeholder="可输入炸鸡或者奶茶">
                <button @click.prevent="searchBtn">搜索</button>
            </form>
        </div>
        <!-- v-if就是确定有内容后才显示 :有搜索结果时-->
        <div class="shop" v-if="result && !showShop">
            <div>
                <!-- 使用这个组件，注册什么事件就用什么值 -->
                <serachIndex :data="result.restaurants" @clickLi="$router.push('/shop')"/>
                <serachIndex :data="result.words" @clickLi="shopItemClick"/>
            </div>
        </div>
        <!-- 没有搜索结果时 -->
        <div class="empty_wrap" v-if="empty">
            <img src="http://ele.joeweiwx.xyz/img/empty.png">
            <div class="empty_txt">
                <h4>附近没有搜索结果</h4>
                <span>这里可以搜索炸鸡、奶茶</span>
            </div>
        </div>
        <!-- 有搜索结果时点击li跳转到商家信息 -->
        <div class="container" v-if="showShop">
            <vfilter :vfilterData="vfilterData" @update='update'/>
            <div style="height: 400px;" class="shopList" v-infinite-scroll="loadMore" :infinite-scroll-disabled="loading">
                <indexShop v-for="(item,index) in restaurants" :key="index" :restaurant="item.restaurant"/>
            </div>
        </div>
    </div>
  </template>

<script>
    import vheader from "../components/vheader";
    import axInstance from "../networks/require.js";
    import serachIndex from "../components/serachIndex";
    import vfilter from "../components/vfilter";
    import indexShop from "../components/indexShop";
    import {
        getFilter
    } from "../networks/api.js";
    import {
        InfiniteScroll
    } from 'mint-ui';
    export default {
        name: 'search',
        data() {
            return {
                key_word: "",
                result: null,
                empty: false, //搜索的内容为空时
                showShop: false, //是否显示商家信息
                vfilterData: null,
                restaurants: [],
                page: 0,
                size: 7,
                loading: false, //默认情况下可以被加载
                rank: null,
            }
        },
        created() {
            getFilter().then(res => {
                this.vfilterData = res.data.data;
                //console.log(this.vfilterData);

            });
        },

        watch: {
            //监听搜索框
            key_word() {
                this.keyWordChange();
                this.showShop = false;
            }
        },
        methods: {
            keyWordChange() {
                if (this.key_word == "炸鸡") {
                    this.empty = false
                    axInstance.post("/searchShop/zhaji").then(res => {
                        this.result = res.data
                        console.log(res);
                    }).catch(err => {
                        this.result = null
                    })
                };
                if (this.key_word == "奶茶") {
                    this.empty = false
                    axInstance.post("/searchShop/naicha").then(res => {
                        this.result = res.data
                        console.log(res);
                    }).catch(err => {
                        this.result = null
                    })
                };
                this.result = null;
            },
            searchBtn() {
                if (!this.key_word) return;
                if (this.result && (this.result.restaurants.length > 0 || this.result.words.length)) {
                    //有内容时
                    this.showShop = true;
                } else {
                    this.empty = true;
                    this.showShop = false
                    console.log(this.result);
                }
            },
            //点击搜索后的小li，进入商家或者商品
            shopItemClick() {
                this.showShop = true;
                this.restaurants = [];
                this.page = 0;
            },
            update(condition) {
                console.log(condition);
                this.rank = condition;
            },
            //当页面上下滚动时，会触发事件
            loadMore() {
                console.log(1);
                this.page++;
                axInstance.post(`/getzhaji/${this.page}/${this.size}`, this.rank).then(res => {
                    //当数据请求完成后，加载中的字眼就没了
                    if (res.data.data) {
                        res.data.data.forEach(item => {
                            this.restaurants.push(item);
                        });
                    } else {
                        this.loading = true;
                    }
                })
                console.log(this.loading);
            },
        },
        components: {
            vheader,
            serachIndex,
            vfilter,
            indexShop,
        },
    }
</script>

<style scoped>
    .search {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
    }
    
    .search_header {
        margin-top: 45px;
        background: #fff;
        padding: 0 4.266667vw;
    }
    
    .search_header .search_wrap {
        padding: 2.933333vw 2.933333vw 2.933333vw 0;
        display: flex;
        align-items: center;
        position: relative;
    }
    
    .search_wrap .fa-search {
        width: 2.933333vw;
        height: 2.933333vw;
        color: #888;
        position: absolute;
        top: 4.6666666vw;
        left: 2.933333vw;
    }
    
    .search_wrap input {
        flex-grow: 1;
        border-radius: 0.266667vw;
        background-color: #f8f8f8;
        padding: 1.733333vw 4vw 1.733333vw 8.8vw;
        color: #666;
        outline: none;
        border: none;
    }
    
    .search_wrap button {
        outline: none;
        border: none;
        color: #333;
        font-size: 0.426667rem;
        background: #fff;
        font-weight: 700;
        margin-left: 2.933333vw;
        font-size: 14px;
    }
    
    .shop {
        width: 100%;
        height: calc(100% - 95px);
        overflow: auto;
    }
    
    .empty_wrap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #fff;
        display: flex;
        justify-content: center;
    }
    
    .empty_wrap img {
        width: 35vw;
        height: 35vw;
    }
    
    .empty_txt h4 {
        color: #666;
        font-size: 1rem;
        margin: 12vw 0 2vw 0;
    }
    
    .empty_txt span {
        color: #999;
        font-size: 0.8rem;
    }
</style>
</style>
</style>